import { defineAsyncComponent, defineComponent, h, ref } from 'vue';

import { $t } from '@vben/locales';

const ElInputNumber = defineAsyncComponent(() =>
  Promise.all([
    import('element-plus/es/components/input-number/index'),
    import('element-plus/es/components/input-number/style/css'),
  ]).then(([res]) => res.ElInputNumber),
);
const EnhancedInputNumber = defineComponent({
  name: 'AdaptedInputNumber',
  inheritAttrs: false,
  props: {
    // 添加 slots 属性声明
    slots: {
      type: Object,
      default: () => ({}),
    },
    // 添加 modelValue 属性用于 v-model
    modelValue: {
      type: Number,
      default: undefined,
    },
  },
  setup: (props: any, { attrs, slots: setupSlots, expose }) => {
    const placeholder =
      props?.placeholder ||
      (attrs as any)?.placeholder ||
      $t(`ui.placeholder.input`);
    const style = props?.style || { width: '100%' };
    const innerRef = ref();

    expose(
      new Proxy(
        {},
        {
          get: (_target, key) => innerRef.value?.[key],
          has: (_target, key) => key in (innerRef.value || {}),
        },
      ),
    );

    return () => {
      // 合并三种来源的插槽：
      // 1. setup 中的 slots（Vue 默认插槽）
      // 2. props 中的 slots（从 componentProps 传递）
      // 3. attrs 中的 slots（备用）
      const propsSlots = props.slots || {};
      const attrsSlots = (attrs as any)?.slots || {};

      const mergedSlots = {
        ...setupSlots,
        ...propsSlots,
        ...attrsSlots,
      };

      return h(
        ElInputNumber,
        {
          ...attrs,
          ...props,
          placeholder,
          style,
          clearable: true,
          ref: innerRef,
          // 移除 slots，避免传递给原生组件
          slots: undefined,
        },
        mergedSlots,
      );
    };
  },
});
export { EnhancedInputNumber };
